<template>
  <div class="checkPersonInfo">
    姓名：<input
      type="text"
      v-model="name"
      style="color: grey"
      placeholder="李华"
    />

    <div class="ageClass">
      年龄：
      <button @click="addOne">+</button>
      <text>{{ age }}</text>
      <button @click="reduceOne">-</button>
    </div>
    性别：
    <input type="radio" v-model="gender" value="男" />男
    <input type="radio" v-model="gender" value="女" />女

    <li>专业：<input type="text" v-model="major" /></li>

    <li>地址：<input type="text" v-model="address" /></li>
    <li>爱好：<input type="text" v-model="hobby" /></li>

    <div class="gradeClass">
      成绩：
      <button @click="addGrade">+</button>
      <text>{{ grade }}</text>
      <button @click="reduceGrade">-</button>
    </div>

    <button
      @click="
        emitter.emit('sendInfo', [
          name,
          age,
          gender,
          major,
          address,
          hobby,
          grade,
        ])
      "
    >
      确认编辑信息
    </button>
  </div>
</template>

<script setup lang="ts" name="CheckPersonInfo">
import { ref, watch } from "vue";
import emitter from "../../../utils/emitter";

let name = ref("李华");
let age = ref(20);
let major = ref("数字媒体技术");
let address = ref("");
let hobby = ref("");
let grade = ref(80);
let gender = ref();

function addOne() {
  age.value += 1;
}
function reduceOne() {
  age.value -= 1;
}
function addGrade() {
  grade.value += 1;
}
function reduceGrade() {
  grade.value -= 1;
}
</script>

<style scoped>
.checkPersonInfo {
  background-color: rgb(223, 250, 250);
}
.ageClass {
  display: flex;
  align-items: center;
}
button {
  margin: 5px;
}
.gradeClass {
  display: flex;
  align-items: center;
}
li {
  list-style-type: none;
}
input {
  margin: 5px;
  color: grey;
}
</style>
